<template>
    <div>
        <div class="footer" v-if="!$store.state.isMobileAndPc">
            <div class="flex_cen footer-content-box">
                <div class="footer-logo">
                    <img src="https://static.pdwl.net/jituan/images/hx/icon1.png" alt="">
                    <p>品质保障 助企腾达</p>
                </div>
                <div class="footer-content">
                    <div class="footer-content-title">核心产品</div>
                    <div class="footer-content-g"></div>
                    <div class="footer-content-text" @click="onJump('/bovineVision', 1,'hx')" style="cursor: pointer;">牛视3.0</div>
                    <div class="footer-content-text" @click="onJump('/bovineVision', 2,'hx')" style="cursor: pointer;">易播数字人</div>
                    <div class="footer-content-text" @click="onJump('/digitalEmployee', 3,'hx')" style="cursor: pointer;">智企云平台</div>
                </div>
                <div class="footer-content">
                    <div class="footer-content-title">关于我们</div>
                    <div class="footer-content-g"></div>
                    <div class="footer-content-text" @click="onJump('/companyIntroduction', 2,'gy')" style="cursor: pointer;">品达集团</div>
                    <div class="footer-content-text" @click="onJump('/news', 1,'gy')" style="cursor: pointer;">新闻资讯</div>
                    <div class="footer-content-text" @click="onJump('/aboutUs', 3,'gy')" style="cursor: pointer;">关于我们</div>
                </div>
                <div class="footer-content">
                    <div class="footer-content-title" style="cursor: pointer;">核心技术</div>
                    <div class="footer-content-g"></div>
                    <div class="footer-content-text" @click="onJump('/coreTechnology')" style="cursor: pointer;">核心技术</div>
                </div>
                <div class="footer-content">
                    <div class="footer-content-title" style="cursor: pointer;">商务合作</div>
                    <div class="footer-content-g"></div>
                    <div class="footer-content-text" @click="onJump('/channel')" style="cursor: pointer;">渠道合作</div>
                </div>
                <div class="footer-content">
                    <div class="footer-content-title">联系我们</div>
                    <div class="footer-content-g"></div>
                    <div class="footer-content-text" @click="dialingPhone">电话：<span style="font-weight: bold;">400-757-8688</span></div>
                    <div class="footer-content-text">公司：杭州品达企服科技（集团）有限公司</div>
                    <div class="footer-content-text flex_start">
                        <div style=" align-self: start;">地址：</div>
                        <div>浙江省杭州市萧山区享得利闽商大厦<br />606室</div>
                    </div>
                </div>
                <div class="footer-code">
                    <img src="https://static.pdwl.net/jituan/images/hx/code.jpg" alt="">
                    <p>关注我们</p>
                </div>
            </div>
            <div class="solution-footer-info">
                <div>
                    杭州品达企服科技 (集团) 有限公司 ▏<span style="cursor: pointer;" @click="openWindow">浙ICP备2023023097号-1</span> 
                </div>
            </div>
        </div>
        <div class="footer-mobile" v-else>
            <div class="flex_start footer-mobile-head">
                <img style="margin-right:3px" src="https://static.pdwl.net/jituan/images/logo.png" alt="">
            </div>
            <div class="footer-mobile-phone" @click="dialingPhone">
                联系我们：400-757-8688 <i class="el-icon-phone-outline"></i>
            </div>
            <div class="footer-mobile-content">
                <p>杭州总部：杭州品达企服科技(集团有限公司)</p>
                <p>总部地址：浙江省杭州市萧山区亨得利闽商大厦606室</p>
            </div>
            <div class="footer-mobile-code">
                <img src="https://static.pdwl.net/jituan/images/code/杭州品达企服科技（集团）有限公司.jpg" alt="">
                <p>关于我们</p>
            </div>
            <div class="footer-mobile-info">
                杭州品达企服科技 (集团) 有限公司 ▏<span style="cursor: pointer;" @click="openWindow">浙ICP备2023023097号-1</span> 
            </div>
        </div>
    </div>
</template>
<script>
export default {
    beforeCreate() {
        let imgs = [
            "https://static.pdwl.net/jituan/images/hx/icon5.png"
        ]
        imgs.forEach((item)=>{
            let img = new Image();
            img.src = item;
            img.onload = function(){}
        })
    },
    methods: {
        dialingPhone(){
            window.location.href= 'tel://400-757-8688'
        },
        openWindow(){
            window.open('https://beian.miit.gov.cn')
        },
        onJump(path, type,state) {
            // if (path == '/solution') {
            //     window.scrollTo(0, 0);
            //     this.$store.commit('setSolutionType', type)
            // } else if (path == '/aboutUs') {
            //     window.scrollTo(0, 0);
            //     this.$store.commit('setSolutionType', type)
            // }
            if (state == '/hx') {
                window.scrollTo(0, 0);
                this.$store.commit('setSolutionType', type)
            } else if (path == '/gy') {
                window.scrollTo(0, 0);
                this.$store.commit('setSolutionType', type)
            }
            let oldPath = this.$route.path
            if (path != oldPath) {
                this.$router.push({ path: path })
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.footer {
    background-image: url('https://static.pdwl.net/jituan/images/hx/icon5.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    height: 460px;
    width: 100%;
    position: relative;

    .footer-content-box {
        width: 70%;
        margin: 0px auto 0;
        padding-top: 120px;

        .footer-logo {
            width: 114px;
            text-align: center;
            align-self: start;

            img {
                width: 114px;
                height: 100px;
                background-size: 100% 100%;
            }

            p {
                font-size: 14px;
                font-weight: 400;
                color: #FFFFFF;
                line-height: 28px;
                white-space: nowrap;
            }
        }

        .footer-content {
            margin-left: 98px;
            align-self: start;

            &-title {
                font-size: 18px;
                font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                font-weight: 400;
                color: #FFFFFF;
                line-height: 28px;
            }

            &-g {
                width: 73px;
                height: 1px;
                margin-top: 20px;
                background: linear-gradient(90deg, #0170FE 0%, #5FDBA8 100%);
            }

            &-text {
                font-size: 14px;
                margin-top: 20px;
                font-family: Microsoft YaHei-Light, Microsoft YaHei;
                font-weight: 300;
                color: #FFFFFF;
                white-space: nowrap;
                line-height: 28px;
                transition: all 0.3s;
                &:hover{
                    font-weight: 400;
                    color: #FFFFFF;
                }
            }
            
        }

        .footer-code {
            width: 100px;
            text-align: center;
            margin-left: 96px;
            align-self: start;

            img {
                width: 100px;
                height: 100px;
                background-size: 100% 100%;
            }

            p {
                font-size: 14px;
                font-weight: 400;
                color: #FFFFFF;
                line-height: 28px;
                white-space: nowrap;
            }
        }

    }

    .solution-footer-info {
        position: absolute;
        bottom: 30px;
        width: 100%;
        text-align: center;
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 20px;
    }
}
.footer-mobile{
    // width: 100%;
    background: #000000;
    color: #fff;
    padding: 30px;
    &-head{
        margin: 50px 0;
        img{
            width: 240px;
            height: 100%;
            background-size: 100% 100%;
        }
    }
    &-phone{
        color: #fff;
        font-size: 32px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        margin-bottom: 30px;
    }
    &-content{
        color: #B4B8BB;
    }
    &-code{
        text-align: center;
        color: #B4B8BB;
        padding: 30px 0 ;
        border-bottom: 1px solid #B4B8BB;
        img{
            width: 200px;
            height: 200px;
            background-size: 100% 100%;
        }
    }
    &-info{
        color: #B4B8BB;
        padding: 20px  0;
        text-align: center;

    }
}
</style>
